<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://codepen.io/chrisgannon/pen/pbzEYr</title>
    <style>
        html, body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', sans-serif;
        }

        a{
            text-decoration: none;
        }

        p, li, a{
            font-size: 14px;
        }

        /* GRID */

        .twelve { width: 100%; }
        .eleven { width: 91.53%; }
        .ten { width: 83.06%; }
        .nine { width: 74.6%; }
        .eight { width: 66.13%; }
        .seven { width: 57.66%; }
        .six { width: 49.2%; }
        .five { width: 40.73%; }
        .four { width: 32.26%; }
        .three { width: 23.8%; }
        .two { width: 15.33%; }
        .one { width: 6.866%; }

        /* COLUMNS */

        .col {
            display: block;
            float:left;
            margin: 1% 0 1% 1.6%;
        }

        .col:first-of-type {
            margin-left: 0;
        }

        .container{
            width: 100%;
            max-width: 940px;
            margin: 0 auto;
            position: relative;
            text-align: center;
        }

        /* CLEARFIX */

        .cf:before,
        .cf:after {
            content: " ";
            display: table;
        }

        .cf:after {
            clear: both;
        }

        .cf {
            *zoom: 1;
        }

        /* ALL */

        .row .three{
            padding: 80px 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #2c3e50;
            color: #ecf0f1;
            text-align: center;
        }

        .hamburger .line{
            width: 50px;
            height: 5px;
            background-color: #ecf0f1;
            display: block;
            margin: 8px auto;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .hamburger:hover{
            cursor: pointer;
        }

        /* ONE */

        #hamburger-1.is-active .line:nth-child(2){
            opacity: 0;
        }

        #hamburger-1.is-active .line:nth-child(1){
            -webkit-transform: translateY(13px) rotate(45deg);
            -ms-transform: translateY(13px) rotate(45deg);
            -o-transform: translateY(13px) rotate(45deg);
            transform: translateY(13px) rotate(45deg);
        }

        #hamburger-1.is-active .line:nth-child(3){
            -webkit-transform: translateY(-13px) rotate(-45deg);
            -ms-transform: translateY(-13px) rotate(-45deg);
            -o-transform: translateY(-13px) rotate(-45deg);
            transform: translateY(-13px) rotate(-45deg);
        }

        /* TWO */

        #hamburger-2.is-active .line:nth-child(1){
            -webkit-transform: translateY(13px);
            -ms-transform: translateY(13px);
            -o-transform: translateY(13px);
            transform: translateY(13px);
        }

        #hamburger-2.is-active .line:nth-child(3){
            -webkit-transform: translateY(-13px);
            -ms-transform: translateY(-13px);
            -o-transform: translateY(-13px);
            transform: translateY(-13px);
        }

        /* THREE */

        #hamburger-3.is-active .line:nth-child(1),
        #hamburger-3.is-active .line:nth-child(3){
            width: 40px;
        }

        #hamburger-3.is-active .line:nth-child(1){
            -webkit-transform: translateX(-10px) rotate(-45deg);
            -ms-transform: translateX(-10px) rotate(-45deg);
            -o-transform: translateX(-10px) rotate(-45deg);
            transform: translateX(-10px) rotate(-45deg);
        }

        #hamburger-3.is-active .line:nth-child(3){
            -webkit-transform: translateX(-10px) rotate(45deg);
            -ms-transform: translateX(-10px) rotate(45deg);
            -o-transform: translateX(-10px) rotate(45deg);
            transform: translateX(-10px) rotate(45deg);
        }

        /* FOUR */

        #hamburger-4.is-active .line:nth-child(1),
        #hamburger-4.is-active .line:nth-child(3){
            width: 40px;
        }

        #hamburger-4.is-active .line:nth-child(1){
            -webkit-transform: translateX(10px) rotate(45deg);
            -ms-transform: translateX(10px) rotate(45deg);
            -o-transform: translateX(10px) rotate(45deg);
            transform: translateX(10px) rotate(45deg);
        }

        #hamburger-4.is-active .line:nth-child(3){
            -webkit-transform: translateX(10px) rotate(-45deg);
            -ms-transform: translateX(10px) rotate(-45deg);
            -o-transform: translateX(10px) rotate(-45deg);
            transform: translateX(10px) rotate(-45deg);
        }

        /* FIVE */

        #hamburger-5.is-active{
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        #hamburger-5.is-active .line:nth-child(2){
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
        }

        #hamburger-5 .line:nth-child(2){
            -webkit-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }


        #hamburger-5.is-active .line:nth-child(2){
            opacity: 0;
        }

        #hamburger-5.is-active .line:nth-child(1),
        #hamburger-5.is-active .line:nth-child(3){
            width: 35px;
            -webkit-transform-origin: right;
            -moz-transform-origin: right;
            -ms-transform-origin: right;
            -o-transform-origin: right;
            transform-origin: right;
        }

        #hamburger-5.is-active .line:nth-child(1){
            -webkit-transform: translateY(15px) rotate(45deg);
            -ms-transform: translateY(15px) rotate(45deg);
            -o-transform: translateY(15px) rotate(45deg);
            transform: translateY(15px) rotate(45deg);
        }

        #hamburger-5.is-active .line:nth-child(3){
            -webkit-transform: translateY(-15px) rotate(-45deg);
            -ms-transform: translateY(-15px) rotate(-45deg);
            -o-transform: translateY(-15px) rotate(-45deg);
            transform: translateY(-15px) rotate(-45deg);
        }

        /* SIX */

        #hamburger-6.is-active{
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            -webkit-transition-delay: 0.6s;
            -o-transition-delay: 0.6s;
            transition-delay: 0.6s;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        #hamburger-6.is-active .line:nth-child(2){
            width: 0px;
        }

        #hamburger-6.is-active .line:nth-child(1),
        #hamburger-6.is-active .line:nth-child(3){
            -webkit-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }

        #hamburger-6.is-active .line:nth-child(1){
            -webkit-transform: translateY(13px);
            -ms-transform: translateY(13px);
            -o-transform: translateY(13px);
            transform: translateY(13px);
        }

        #hamburger-6.is-active .line:nth-child(3){
            -webkit-transform: translateY(-13px) rotate(90deg);
            -ms-transform: translateY(-13px) rotate(90deg);
            -o-transform: translateY(-13px) rotate(90deg);
            transform: translateY(-13px) rotate(90deg);
        }

        /* SEVEN */

        #hamburger-7.is-active .line:nth-child(1){
            width: 30px;
        }

        #hamburger-7.is-active .line:nth-child(2){
            width: 40px;
        }

        #hamburger-7.is-active .line{
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        /* EIGHT */

        #hamburger-8.is-active .line:nth-child(2){
            opacity: 0;
        }

        #hamburger-8.is-active .line:nth-child(1){
            -webkit-transform: translateY(13px);
            -ms-transform: translateY(13px);
            -o-transform: translateY(13px);
            transform: translateY(13px);
        }

        #hamburger-8.is-active .line:nth-child(3){
            -webkit-transform: translateY(-13px) rotate(90deg);
            -ms-transform: translateY(-13px) rotate(90deg);
            -o-transform: translateY(-13px) rotate(90deg);
            transform: translateY(-13px) rotate(90deg);
        }

        /* NINE */

        #hamburger-9{
            position: relative;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        #hamburger-9.is-active{
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        #hamburger-9:before{
            content: "";
            position: absolute;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 70px;
            height: 70px;
            border: 5px solid transparent;
            top: calc(50% - 35px);
            left: calc(50% - 35px);
            border-radius: 100%;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        #hamburger-9.is-active:before{
            border: 5px solid #ecf0f1;
        }

        #hamburger-9.is-active .line{
            width: 35px;
        }

        #hamburger-9.is-active .line:nth-child(2){
            opacity: 0;
        }

        #hamburger-9.is-active .line:nth-child(1){
            -webkit-transform: translateY(13px);
            -ms-transform: translateY(13px);
            -o-transform: translateY(13px);
            transform: translateY(13px);
        }

        #hamburger-9.is-active .line:nth-child(3){
            -webkit-transform: translateY(-13px) rotate(90deg);
            -ms-transform: translateY(-13px) rotate(90deg);
            -o-transform: translateY(-13px) rotate(90deg);
            transform: translateY(-13px) rotate(90deg);
        }

        /* TEN */

        #hamburger-10{
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        #hamburger-10.is-active{
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        #hamburger-10.is-active .line:nth-child(1){
            width: 30px
        }

        #hamburger-10.is-active .line:nth-child(2){
            width: 40px
        }

        /* ELEVEN */

        #hamburger-11{
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        #hamburger-11.is-active{
            animation: smallbig 0.6s forwards;
        }

        @keyframes smallbig{
            0%, 100%{
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }

            50%{
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
            }
        }

        #hamburger-11.is-active .line:nth-child(1),
        #hamburger-11.is-active .line:nth-child(2),
        #hamburger-11.is-active .line:nth-child(3){
            -webkit-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            transition-delay: 0.2s;
        }

        #hamburger-11.is-active .line:nth-child(2){
            opacity: 0;
        }

        #hamburger-11.is-active .line:nth-child(1){
            -webkit-transform: translateY(13px) rotate(45deg);
            -ms-transform: translateY(13px) rotate(45deg);
            -o-transform: translateY(13px) rotate(45deg);
            transform: translateY(13px) rotate(45deg);
        }

        #hamburger-11.is-active .line:nth-child(3){
            -webkit-transform: translateY(-13px) rotate(-45deg);
            -ms-transform: translateY(-13px) rotate(-45deg);
            -o-transform: translateY(-13px) rotate(-45deg);
            transform: translateY(-13px) rotate(-45deg);
        }

        /* TWELVE */

        #hamburger-12.is-active .line:nth-child(1){
            opacity: 0;
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            -o-transform: translateX(-100%);
            transform: translateX(-100%);
        }

        #hamburger-12.is-active .line:nth-child(3){
            opacity: 0;
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            -o-transform: translateX(100%);
            transform: translateX(100%);
        }

    </style>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body type="pug">
<div class="container">
    <h1>Hamburger Icon Animations</h1>
    <div class="row cf">
        <div class="three col">
            <div class="hamburger" id="hamburger-1">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-2">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-3">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-4">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
    </div>
    <div class="row cf">
        <div class="three col">
            <div class="hamburger" id="hamburger-5">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-6">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-7">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-8">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
    </div>
    <div class="row cf">
        <div class="three col">
            <div class="hamburger" id="hamburger-9">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-10">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-11">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="three col">
            <div class="hamburger" id="hamburger-12">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".hamburger").click(function(){
            $(this).toggleClass("is-active");
        });
    });

</script>
</body>
</html>